<template>
    <div class="avatar-card-container">
        <div class="top-container" :style="cardCss">
            <div class="header">
                <img :src="data.options.avatarDefaultValue" v-if="data.options.isShowAvatar" class="avatar">
                <h3
                    :style="{
                        'fontSize': data.options.titleFontSize
                    }"
                >{{ data.options.titleDefaultValueCName }}</h3>
            </div>
            <ul class="item-content">
                <li>
                    <div class="num">{{ data.options.item1NumDefaultValueCName }}</div>
                    <div class="desc">{{ data.options.item1DescDefaultValueCName }}</div>
                </li>
                <li class="middle">
                    <div class="num">{{ data.options.item2NumDefaultValueCName }}</div>
                    <div class="desc">{{ data.options.item2DescDefaultValueCName }}</div>
                </li>
                <li>
                    <div class="num">{{ data.options.item3NumDefaultValueCName }}</div>
                    <div class="desc">{{ data.options.item3DescDefaultValueCName }}</div>
                </li>
            </ul>
        </div>
        <div class="link-cell">
            <div class="bd-content">{{ data.options.linkDefaultValueCName }}</div>
            <i class="el-icon-arrow-right" />
        </div>

    </div>
</template>
<script>
export default {
    name: 'AvatarCard',
    props: {
        data: {
            type: Object
        }
    },
    computed: {
        cardCss() {
            return {
                'background': 'linear-gradient(to ' + this.data.options.direction + ', ' + this.data.options.color1 + ', ' + this.data.options.color2 + ')',
                'color': this.data.options.color,
                'fontSize': this.data.options.fontSize
            }
        }
    }
}
</script>
